<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最小的响应式动态网格瀑布流布局js插件|DEMO2_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <style type="text/css">
        .grid {

            position: relative;

            /* fluffy */
            margin: 0 auto;
            width: 98%;
            /* end fluffy */
        }

        .grid-item {
            position: absolute;

            /* fluffy */
            opacity: 0;
            box-shadow: 1px 1px #9E9E9E;
            width: 180px;
            height: 120px;
            border-radius: 3px;
            background-color: #536DFE;
            /* end fluffy */

        }

        /* mq */

        @media (max-width: 600px) {
            .grid-item {
                width: 120px;
                height: 80px;
            }
        }
    </style>
    <!--[if IE]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<div>
    <div class="grid">
        <div class="grid-item">
            <img src="./img/001.png" alt="" style="width: 100%; height: 100%">
        </div>
        <div class="grid-item"><img src="./img/001.png" alt="" style="width: 100%; height: 100%"></div>
        <div class="grid-item" style="height: 245px;"><img src="./img/001.png" alt="" style="width: 100%; height: 100%">
        </div>
        <div class="grid-item"><img src="./img/001.png" alt="" style="width: 100%; height: 100%"></div>
        <div class="grid-item" style="height: 290px;"><img src="./img/001.png" alt="" style="width: 100%; height: 100%">
        </div>
        <div class="grid-item"><img src="./img/001.png" alt="" style="width: 100%; height: 100%"></div>
        <div class="grid-item" style="height: 140px;"><img src="./img/001.png" alt="" style="width: 100%; height: 100%">
        </div>
        <div class="grid-item" style="height: 200px"></div>
        <div class="grid-item" style="height: 150px"></div>
        <div class="grid-item"></div>
        <div class="grid-item" style="height: 220px"></div>
        <div class="grid-item" style="height: 205px"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>
<script src="js/dynamics.js"></script>
<script src="js/minigrid.js"></script>
<script>
    (function () {
        function animate(item, x, y, index) {
            dynamics.animate(item, {
                translateX: x,
                translateY: y,
                opacity: 1
            }, {
                type: dynamics.spring,
                duration: 800,
                frequency: 120,
                delay: 100 + index * 30
            });
        }

        minigrid('.grid', '.grid-item', 6, animate);

        window.addEventListener('resize', function () {
            minigrid('.grid', '.grid-item', 6, animate);
        });
    })();
</script>
</body>
</html>